<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>物料类型</title>
		<link rel="stylesheet" href="/public/component/pear/css/pear.css" />
		<style>
			.expand.pear-btn:hover {
				color: currentColor;
        		background: none;
			}

			.expand.pear-btn {
				border: 1px solid rgba(255, 255, 255, 0)
			}

			.zy-card-head {
				background-color:#36b368;
				color:white;
			}
		</style>
	</head>

	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form id="userForm" class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">名称</label>
							<div class="layui-input-inline">
								<input type="text" name="name" placeholder="" class="layui-input">
							</div>
						</div>
                        <div class="layui-inline">
                            <label class="layui-form-label">启用</label>
                            <div class="layui-input-inline">
                            <input type="checkbox" name="enable" lay-skin="switch">
                            </div>
                        </div>
						<div class="layui-inline" style="margin-left: 50px;">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
							<button type="button" class="pear-btn pear-btn-md expand">
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="goodType-table" lay-filter="goodType-table"></table>
			</div>
		</div>

		<script type="text/html" id="user-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</button>
			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
				<i class="layui-icon layui-icon-delete"></i>
				删除
			</button>
		</script>

		<script type="text/html" id="user-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
					class="layui-icon layui-icon-edit"></i></button>
			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
					class="layui-icon layui-icon-delete"></i></button>
			<!--<button class="pear-btn pear-btn-sm" id="more_{{d.id}}"><i class="layui-icon layui-icon-triangle-d"></i></button>-->
		</script>

		<div style="display: none;">
			<div class="layer-top">
				<br />
				<div class="layui-card">
					<div class="layui-card-body">
						<form id="goodTypeForm" class="layui-form" action="javascript:void(0);" lay-filter="goodtype-form">
							<div class="layui-card-body layui-row layui-col-space10">
								<div class="layui-card-header zy-card-head"><h3>物料类型 - 新增</h3></div>
								<div class=" layui-col-md12">
									<label class="layui-form-label">名称</label>
									<div class="layui-input-block">
									<input type="text" name="name" required  lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-col-md6">
									<label class="layui-form-label">启用</label>
									<div class="layui-input-block">
									<input type="checkbox" name="enable" lay-skin="switch">
									</div>
								</div>
								<div class="layui-inline" style="margin-left: 50px;">
									<button class="pear-btn pear-btn-md pear-btn-primary goodtype-add" lay-submit lay-filter="goodtype-add">
										<i class="layui-icon layui-icon-add-1"></i>
										创建
									</button>
                                    <button class="pear-btn pear-btn-md pear-btn-primary goodtype-edit" lay-submit lay-filter="goodtype-edit">
										<i class="layui-icon layui-icon-edit"></i>
										更新
									</button>
									<button type="reset" class="pear-btn pear-btn-md">
										<i class="layui-icon layui-icon-refresh"></i>
										重置
									</button>
									<button type="button" class="pear-btn pear-btn-md expand">
									</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<script src="../../public/component/layui/layui.js"></script>
		<script src="../../public/component/pear/pear.js"></script>
		<script>
			layui.use(['table', 'form', 'button', 'jquery', 'drawer', 'dropdown', 'popup', 'http'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let drawer = layui.drawer;
				let dropdown = layui.dropdown;
                let button = layui.button;
				let popup = layui.popup;
				let http = layui.http;

				const getCsrftoken = function(c) {
					const a = c.split('=');
					for(var i = 0; i < a.length; i++){
						if(a[i] == 'csrfToken') return a[i+1];
					}
				}

				$.ajaxSetup({
					beforeSend: function (xhr, settings) {
						if ( !this.crossDomain ) {
							xhr.setRequestHeader('x-csrf-token', http.ajax.getCookieValue('csrfToken'));
						}
					},
				});

				formToggle({
					elem: "#userForm",
				});

				function formToggle(options) {
					var defaultsOpt = {
						isExpand: false,
						prefixIcon: "layui-icon",
						toggleIcon: ['layui-icon-down', 'layui-icon-up'],
						toggleText: ['展开', '折叠'],
					}
					var opt = $.extend({}, defaultsOpt, options);
					var elem = opt.elem; // 绑定的表单元素,必填
					var min = opt.min; // 最小显示数,默认显示一行
					var isExpand = opt.isExpand; // 初始展开
					var prefixIcon = opt.prefixIcon + " "; // 图标前缀
					var toggleIcon = opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon]
					var toggleText = opt.toggleText; // 折叠和展开时的文本

					var eleDOM = $(elem + " .layui-inline");
					var firstElTop = eleDOM.first().offset().top;
					var targetEl = eleDOM.filter(function(index) {
						var isGtMin = (index + 1) > min;
						var isGtFirstElTop = $(this).offset().top > firstElTop;
						var isNeqLast = (index + 1) != eleDOM.length;
						return min ? isGtMin && isNeqLast : isGtFirstElTop && isNeqLast;
					});

					var unExpandIcon = prefixIcon + toggleIcon[0];
					var expandIcon = prefixIcon + toggleIcon[1];
					var unExpandText = toggleText[0];
					var expandText = toggleText[1];
					var btnSelector = elem + " .expand";
					$(btnSelector).append("<i></i>")
					if (targetEl.length > 0) {
						if (isExpand) {
							$(btnSelector).prepend("<span>" + expandText + "</span>");
							$(btnSelector + ">i").addClass(expandIcon);
						} else {
							$(btnSelector).prepend("<span>" + unExpandText + "</span>")
							$(btnSelector + ">i").addClass(unExpandIcon)
							targetEl.addClass("layui-hide");
						}
						$(btnSelector).click(function() {
							isExpand = !isExpand;
							if (isExpand) {
								$(btnSelector + ">span").html(expandText);
								$(btnSelector + ">i").removeClass(unExpandIcon).addClass(expandIcon);
								targetEl.removeClass("layui-hide")
							} else {
								$(btnSelector + ">span").html(unExpandText);
								$(btnSelector + ">i").removeClass(expandIcon).addClass(unExpandIcon);
								targetEl.addClass("layui-hide")
							}
						})
					}
				}

				let cols = [
					[{
							type: 'checkbox'
						},
						{
							title: 'ID',
							field: 'id',
							align: 'center',
							width: 100
						},
						{
							title: '名称',
							field: 'name',
							align: 'center',
							width: 150
						},
						{
							title: '启用',
							field: 'enable',
							align: 'center',
							templet: function(d){
								// 返回模板内容
								return `<input type="checkbox" name="enable" value="${d.enable}" lay-skin="switch" lay-text="启用|禁用" lay-filter="goodType-enable" ${d.enable == 1 ? 'checked="true"' : ''} disabled />`
							},//templet: '#user-enable'
						},
						{
							title: '操作',
							toolbar: '#user-bar',
							align: 'left',
							width: 160,
							fixed: 'right'
						}
					]
				]

				table.render({
					elem: '#goodType-table',
					url: '/masterData/goodType/find',
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#user-toolbar',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports'],
					done: function(res, curr, count) {
						for (var i = 0; i < res.data.length; i++) {
							dropdown.render({
								elem: '#more_' + res.data[i].id,
								data: [{
									title: 'menu item11',
									id: 100
								}, {
									title: 'menu item22',
									id: 101
								}, {
									title: 'menu item33',
									id: 102
								}],
								id: '#more_' + res.data[i].id,
								click: function(obj) {
									layer.tips('点击了：' + obj.title, this.elem, {
										tips: [1, '#5FB878']
									})
								}
							});
						}
					}
				});

				table.on('tool(goodType-table)', function(obj) {
					if (obj.event === 'remove') {
						window.remove(obj);
					} else if (obj.event === 'edit') {
						window.edit(obj);
					}
				});

				table.on('toolbar(goodType-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
					}
				});

				form.on('submit(user-query)', function(data) {
					table.reload('goodType-table', {
						where: data.field
					})
					return false;
				});

				form.on('switch(user-enable)', function(obj) {
					layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
				});

				window.add = function() {
					$(".goodtype-edit").addClass('layui-hide');
					$(".goodtype-add").removeClass('layui-hide');
					$("#goodTypeForm").find('h3').html('物料类型 - 新建');

					var obj_id = $("#goodTypeForm").find("input[name='id']");
					if(obj_id) obj_id.remove();

					drawer.open({
						direction: "top",
						dom: ".layer-top",
						distance: "30%"
					});
				}

				window.edit = function(obj) {
					$(".goodtype-edit").removeClass('layui-hide');
					$(".goodtype-add").addClass('layui-hide');
					$("#goodTypeForm").append(`<input type='hidden' name='id' value='${obj.data.id}' />`);
					$("#goodTypeForm").find('h3').html('物料类型 - 编辑');

					form.val('goodtype-form', { //给表单赋初始值
						"id": obj.data.id,
						"name": obj.data.name,
						"enable": obj.data.enable == 1						
					});

					drawer.open({
						direction: "top",
						dom: ".layer-top",
						distance: "30%"
					});
				}

				window.remove = function(obj) {
					layer.confirm('确定要删除此记录', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url: "/masterData/goodType/" + obj.data['id'],
							dataType: 'json',
							type: 'delete',
							success: function(result) {
								layer.close(loading);
								if (result.code == 200) {
									layer.msg(result.message, {
										icon: 1,
										time: 1000
									}, function() {
										table.reload('goodType-table');
									});
								} else {
									layer.msg(result.message, {
										icon: 2,
										time: 1000
									});
								}
							}
						})
					});
				}

				window.batchRemove = function(obj) {
					let data = table.checkStatus(obj.config.id).data;
					if (data.length === 0) {
						layer.msg("未选中数据", {
							icon: 3,
							time: 1000
						});
						return false;
					}
					let ids = "";
					for (let i = 0; i < data.length; i++) {
						ids += data[i].id + ",";
					}
					ids = ids.substr(0, ids.length - 1);
					layer.confirm('确定要删除这些数据', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url: "/masterData/goodType/batchRemove/" + ids,
							dataType: 'json',
							type: 'delete',
							success: function(result) {
								layer.close(loading);
								if (result.code == 200) {
									layer.msg(result.message, {
										icon: 1,
										time: 1000
									}, function() {
										table.reload('goodType-table');
									});
								} else {
									layer.msg(result.message, {
										icon: 2,
										time: 1000
									});
								}
							}
						})
					});
				}

				window.refresh = function(param) {
					table.reload('goodType-table');
				}

                // 新增提交
				form.on('submit(goodtype-add)', function(data) {
					/// 验证

					$.ajax({
						url: "/masterData/goodType/add",
						dataType: 'json',
						data: JSON.stringify(data.field),
						contentType: 'application/json',
						type: 'post',
						success: function(result) {
							if (result.code == 200) {
								button.load({
									elem: '.goodtype-add',
									time: 1000,
									done: function() {
										popup.success("新增成功", function() {
											table.reload('goodType-table');
										});
										return false;
									}
								})
							} else {
								layer.msg(result.message, {
									icon: 2,
									time: 1000
								});
							}
						}
					})
				});

				// 修改
				form.on('submit(goodtype-edit)', function(data) {
					/// 验证

					$.ajax({
						url: "/masterData/goodType/update",
						dataType: 'json',
						data: JSON.stringify(data.field),
						contentType: 'application/json',
						type: 'post',
						success: function(result) {
 							if (result.code == 200) {
								button.load({
									elem: '.goodtype-edit',
									time: 1000,
									done: function() {
										popup.success("更新成功", function() {
											table.reload('goodType-table'); //location.href = "/masterData/goodType"
										});
										return false;
									}
								})
							} else {
								layer.msg(result.message, {
									icon: 2,
									time: 1000
								});
							}
						}
					})
				});
			})
		</script>
	</body>

</html>
